<template>
<div class="com-class-bar">
  <div class="title fr jc">每日各班级确诊预览统计</div>
  <div class="chart" ref="chart"></div>
</div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'com-class-bar',
  props: ['chartData'],
  data () {
    return {
      chart: null
    }
  },
  methods: {
    setOption () {
      const data = this.chartData.filter((v, i) => i < 12)

      this.chart.setOption({
        textStyle: {
          fontFamily: 'PingFangSC-Regular'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          padding: 10,
          borderRadius: 8,
          textStyle: {
            fontSize: 28
          },
          formatter: '{b}<br><span class="dot" style="background-color:#655FFF;"></span>{a0}: {c0}<br><span class="dot" style="background-color:#029DD1;"></span>{a1}: {c1}'
        },
        color: [{
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [{
            offset: 0, color: '#655FFF' // 0% 处的颜色
          }, {
            offset: 1, color: '#02DDFF' // 100% 处的颜色
          }]
        }, {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [{
            offset: 0, color: '#029DD1' // 0% 处的颜色
          }, {
            offset: 1, color: '#37E882' // 100% 处的颜色
          }]
        }],
        legend: {
          top: '60px',
          right: '84px',
          itemGap: 60,
          icon: 'circle',
          itemWidth: 32,
          itemHeight: 32,
          textStyle: {
            color: 'rgba(255, 255, 255, .8)',
            fontSize: 32,
            padding: [5, 5, 5, 20]
          },
          data: ['累计', '今日']
        },
        grid: {
          left: '72px',
          right: '72px',
          top: '138px',
          bottom: '44px',
          containLabel: true
        },
        xAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: ['rgba(204, 204, 204, .2)'],
              width: 2,
              type: 'dashed'
            }
          }
        },
        yAxis: {
          type: 'category',
          inverse: true,
          axisLine: {
            lineStyle: {
              color: ['rgba(101, 146, 220, .2)'],
              width: 2
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#fff',
            fontSize: 28,
            margin: 16
          },
          data: data.map(v => v.textname)
        },
        series: [
          {
            name: '累计',
            type: 'bar',
            barWidth: 32,
            stack: '总量',
            data: data.map(v => v.leijicount)
          },
          {
            name: '今日',
            type: 'bar',
            barWidth: 32,
            stack: '总量',
            data: data.map(v => v.jinricount)
          }
        ]
      })
    }
  },
  mounted () {
    this.chart = echarts.init(this.$refs.chart)
    this.setOption()
  },
  watch: {
    chartData () {
      this.setOption()
    }
  }
}
</script>

<style lang="less">
.com-class-bar {width: 920px;height: 1314px;border: 4px solid #0BFFFE;
  .title {height: 104px;padding-top: 28px;font: 500 40px PingFangSC-Medium;color: #FFFFFF;background: url("../../../../assets/img/p：：位图_2@2x.png") bottom center/754px 6px no-repeat;}
  .chart {width: 912px;height: 1202px;}
  .dot {display:inline-block;margin-right:10px;border-radius:20px;width:20px;height:20px;}
}
</style>
